﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Default/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="SystemContent" runat="server">
<script type="text/javascript" language="javascript">
    $(function () {
        var index = 0;
        $(".tab_title ul li").click(function () {
            index = $(".tab_title ul li").index(this);                      //获取当前页签
            $(this).addClass("selected").siblings().removeClass("selected"); //当前页签为选择状态其他全部为非选择状态
            $(".tab_content div").eq(index).show().siblings().hide();       //当前页签内容为显示状态其他全部为隐藏状态
        });
        var i = 6;                                                          //定义每个面板显示6个菜单
        var len = $(".u .scrol li").length;                                 //获得LI元素的个数
        var page = 1;
        var maxpage = Math.ceil(len / i);                                   //计算页数
        var scrollWidth = $(".u").width();                                  //滚动条宽度为u的宽度
        var divbox = "<div id='div1' >已经到最后一个面板了</div>";          //提示DIV
        $("body").append(divbox);                                           //??
        $(".vright").click(function (e) {
            if (!$(".u .scrol").is(":animated")) {                          //如果是静止的                      
                if (page == maxpage) {                                      //如果是最后一页
                    $(".u .scrol").stop();
                    $("#div1").css({
                        "top": (e.pageY + 20) + "px",
                        "left": (e.pageX + 20) + "px",
                        "opacity": "0.9"

                    }).stop(true, false).fadeIn(800).fadeOut(800);

                } else {
                    $(".u .scrol").animate({ left: "-=" + scrollWidth + "px" }, 2000);
                    page++;
                }
            }
        });
        $(".vleft").click(function () {
            if (!$(".u .scrol").is(":animated")) {
                if (page == 1) {
                    $(".u .scrol").stop();
                } else {
                    $(".u .scrol").animate({ left: "+=" + scrollWidth + "px" }, 2000);
                    page--;
                }
            }
        });

    });
</script>
<div id="tab" style="margin-top: 25px;">
    <%using (Html.BeginForm())
      { %>

    <div class="tab_title">
        <div class="vleft">
            <strong><<</strong></div>
        <div class="u">
            <ul class="scrol">
                <li class="selected">意义</li>
                <li>出处</li>
                <li>避讳</li>
                <li>名人</li>
                <li>谐音</li>
                <li>神话</li>
                <li>周易</li>
                <li>五行</li>
                <li>星座</li>
                <li>生肖</li>
                <li>孪生</li>
                <li>兄弟</li>
                <li>宗室</li>
                <li>选项14</li>
            </ul>
        </div>
        <div class="vright">
            <strong>>></strong></div>
    </div>
    <div class="tab_content">
        <div>
            <ul>
                <li>启用本功能</li>
            </ul>
            <ul id="TableOfMeaning">
                <li>
                    <%=Html.CheckBox("A1")%>舒畅、安适</li>
                <li>
                    <%=Html.CheckBox("A1")%>温暖、和煦</li>
                <li>
                    <%=Html.CheckBox("A1")%>扩展、扩充</li>
                <li>
                    <%=Html.CheckBox("A1")%>勤劳、勉励</li>
                <li>
                    <%=Html.CheckBox("A1")%>成功、成就</li>
                <li>
                    <%=Html.CheckBox("A1")%>奔腾、驰骋</li>
                <li>
                    <%=Html.CheckBox("A1")%>敏捷、矫健</li>
                <li>
                    <%=Html.CheckBox("A1")%>超越、飞跃</li>
                <li>
                    <%=Html.CheckBox("A1")%>明净、纯洁</li>
                <li>
                    <%=Html.CheckBox("A1")%>飞翔、上升</li>
                <li>
                    <%=Html.CheckBox("A1")%>增加、增强</li>
                <li>
                    <%=Html.CheckBox("A1")%>辅佐、佑助</li>
                <li>
                    <%=Html.CheckBox("A1")%>文学、艺术</li>
                <li>
                    <%=Html.CheckBox("A1")%>适当、适宜</li>
                <li>
                    <%=Html.CheckBox("A1")%>锋利、锐利</li>
                <li>
                    <%=Html.CheckBox("A1")%>善于、擅长</li>
                <li>
                    <%=Html.CheckBox("A1")%>顶级、极致</li>
                <li>
                    <%=Html.CheckBox("A1")%>清晰、清楚</li>
                <li>
                    <%=Html.CheckBox("A1")%>坚强、坚固</li>
                <li>
                    <%=Html.CheckBox("A1")%>开创、建立</li>
                <li>
                    <%=Html.CheckBox("A1")%>道路、前途</li>
            </ul>
            <ul>
                请输入自定义的意义：<%=Html.TextBox("tbMeaning")%>
            </ul>
        </div>
        <div class="none">
            <ul>
                <li>启用本功能</li>
            </ul>
            <ul id="TableOfMeaning2">
                <li>
                    <%=Html.CheckBox("A1")%>诗经</li>
                <li>
                    <%=Html.CheckBox("A1")%>楚辞</li>
                <li>
                    <%=Html.CheckBox("A1")%>论语</li>
                <li>
                    <%=Html.CheckBox("A1")%>离骚</li>
                <li>
                    <%=Html.CheckBox("A1")%>唐诗</li>
                <li>
                    <%=Html.CheckBox("A1")%>宋词</li>
            </ul>
        </div>
        <div class="none">
            <p>
                3</p>
        </div>
        <div class="none">
            <p>
                4</p>
        </div>
        <div class="none">
            <p>
                5</p>
        </div>
        <div class="none">
            <p>
                6</p>
        </div>
        <div class="none">
            <p>
                7</p>
        </div>
        <div class="none">
            <p>
                8</p>
        </div>
        <div class="none">
            <p>
                9</p>
        </div>
        <div class="none">
            <p>
                10</p>
        </div>
        <div class="none">
            <p>
                11</p>
        </div>
        <div class="none">
            <p>
                12</p>
        </div>
        <div class="none">
            <p>
                13</p>
        </div>
    </div>
</div>
<div class="pitem1">
    <em>&nbsp;</em>
    <input type="submit" name="button1" id="SubmitSend" class="btn_blue6""
        value="下一步" />
</div>
<%} %>
</asp:Content>
